<template>
  <div class="container">
    <div
        class="left-icon select"
        :class="{ 'css-disabled': active === 1 }"
        @click="prev"
    >
      <svg fill="none" height="13" viewBox="0 0 8 13" width="8" xmlns="http://www.w3.org/2000/svg">
        <g fill="#000">
          <path d="m7.91419 1.41431-6.48529 6.48528-1.4142102-1.41422 6.4852802-6.48527702z"></path>
          <path d="m6.48528 12.9849-6.48528027-6.48532 1.41421027-1.41421 6.48528 6.48523z"></path>
        </g>
      </svg>
    </div>

    <div class="content">
<span
    v-for="item in count"
    :key="item"
    class="css-slider-dot"
    :class="{ 'active': active === item }"
    @click="slide_position(item)"
></span>
    </div>

    <div
        class="right-icon select"
        :class="{ 'css-disabled': active === count }"
        @click="next"
    >
      <svg width="9" height="13" viewBox="0 0 9 13" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M0.914169 11.5857L7.39945 5.10041L8.81367 6.51463L2.32838 12.9999L0.914169 11.5857Z" fill="black"></path>
        <path d="M2.34307 0.0151367L8.82835 6.50042L7.41414 7.91463L0.928857 1.42935L2.34307 0.0151367Z" fill="black"></path>
      </svg>
    </div>
  </div>
</template>

<script setup lang='ts'>
defineProps({
  count: { type: Number, required: true },
  active: { type: Number, required: true },
  prev: { type: Function, required: true },
  next: { type: Function, required: true },
  slide_position: { type: Function, required: true }
})
</script>

<style scoped lang='less'>
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  gap: 10px;
  width: 100%;

  .css-disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  .select {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #f5f5f5;

    &:hover:not(.css-disabled) {
      background: #e0e0e0;
    }

    svg {
      width: 16px;
      height: 16px;
    }
  }

  .content {
    display: flex;
    gap: 8px;

    .css-slider-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #ddd;
      cursor: pointer;
      transition: all 0.3s ease;

      &.active {
        width: 30px;
        border-radius: 5px;
        background: #000;
      }

      &:hover:not(.active) {
        background: #aaa;
      }
    }
  }
}
</style>